{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load icons %}

{% block content %}
<!--block content-->
<div class="page-wrapper">
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Compute
                    </div>
                    <h2 class="page-title">
                        {{ compute.name }}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card"> 
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <span class="text-azure">{% icon 'dashboard' %}&nbsp;&nbsp;{% trans "Overview" %}</span>
                        </a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="{% url 'instances' compute.id %}">
                            <span>{% icon 'server' %}&nbsp;&nbsp;{% trans "Instances" %}</span>
                        </a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="{% url 'storages' compute.id %}">
                            <span>{% icon 'hdd-o' %}&nbsp;&nbsp;{% trans "Storages" %}</span>
                        </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'networks' compute.id %}">
                                <span>{% icon 'sitemap' %}&nbsp;&nbsp;{% trans "Networks" %}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'interfaces' compute.id %}">
                                <span>{% icon 'wifi' %}&nbsp;&nbsp;{% trans "Interfaces" %}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'nwfilters' compute.id %}">
                                <span>{% icon 'filter' %}&nbsp;&nbsp;{% trans "NWFilters" %}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'virtsecrets' compute.id %}">
                                <span>{% icon 'key' %}&nbsp;&nbsp;{% trans "Secrets" %}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="card-title">{% trans "Basic details" %}</div>
                    <p class="text-muted">
                        <!-- Tab1 -->
                        <dl class="mx-3 row">
                            <dt class="col-3">{% trans "Hostname" %}</dt>
                            <dd class="col-9">{{ hostname }}</dd>
                            <dt class="col-3">{% trans "Hypervisors" %}</dt>
                            <dd class="col-9">
                                {% for arch, hpv in hypervisor.items|slice:":4" %}
                                    <span class="badge bg-green">{{ arch }}</span>
                                {% endfor %}
                            </dd>  
                            <dt class="col-3">{% trans "Emulator" %}</dt>
                            <dd class="col-9">{{ emulator }}</dd>
                            <dt class="col-3">{% trans "Version" %}</dt>
                            <dd class="col-9">
                                <span class="badge bg-azure">{% trans 'Qemu' %} </span>
                                <span class="badge bg-azure-lt">{{ version }}</span> &nbsp;
                                <span class="badge bg-indigo">{% trans 'Libvirt' %} </span>
                                <span class="badge bg-indigo-lt">{{ lib_version }}</span> &nbsp;
                            </dd>
                            <dt class="col-3">{% trans "Memory" %}</dt>
                            <dd class="col-9">{{ host_memory|filesizeformat }}</dd>
                            <dt class="col-3">{% trans "Architecture" %}</dt>
                            <dd class="col-9">{{ host_arch }}</dd>
                            <dt class="col-3">{% trans "Logical CPUs" %}</dt>
                            <dd class="col-9">{{ logical_cpu }}</dd>
                            <dt class="col-3">{% trans "Processor" %}</dt>
                            <dd class="col-9">{{ model_cpu }}</dd>
                            <dt class="col-3">{% trans "Connection" %}</dt>
                            <dd class="col-9">{{ uri_conn }}</dd>
                            <dt class="col-3">{% trans "Details" %}</dt>
                            <dd class="col-9">{{ compute.details }}</dd>
                        </dl>
                        <!-- Table2 -->
                        <div class="card-title">{% trans "Performance" %}</div>
                        <div class="mx-3 shadow-sm">
                            <div class="my-3 card border-success">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <i class="fa fa-long-arrow-right"></i> 
                                        {% trans "CPU Utilization" %}
                                    </h5>
                                    <canvas id="cpuChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                
                            <div class="my-3 card border-primary">
                                <div class="card-body">
                                    <h5 class="card-title ">
                                        <i class="fa fa-long-arrow-right"></i> {% trans "RAM Utilization" %}
                                    </h5>
                                    <canvas id="memChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--block content-->
</div>
<div class="page-wrapper">
{% endblock %}
{% block script %}
    <script src="{% static "assets/js/vendors/chart.bundle.min.js" %}"></script>
    <script>

        var cpu_ctx = document.getElementById("cpuChart").getContext("2d");
        var cpuChart = new Chart(cpu_ctx, {
            type: 'line',
            data: {
                datasets : [{
                    label: 'Usage',
                    backgroundColor: "rgba(241,72,70,0.5)",
                    pointRadius: 2,
                }]
            },
            options: {
                responsive: true,
                legend: {
                    display: false
                },
                scales: {
                    xAxes:[{
                        offset: false,
                        ticks: {
                            beginAtZero: false,
                            autoSkip: true,
                            maxTicksLimit: 10,
                            maxRotation: 0,
                            minRotation: 0,
                            stepSize: 10,
                        },
                    }],
                    yAxes: [{
                        ticks: {
                            max: 100,
                            min: 0,
                            stepSize: 20,
                            callback: function(value, index, values) {
                                return value + ' %';
                            }
                        },
                    }],
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, chart) {
                            var label = chart.datasets[tooltipItem.datasetIndex].label || '';
                            if (label) {
                                label += ': ';
                            }
                            return label += tooltipItem.yLabel + ' %';
                        }
                    }
                }
            }
        });

        var mem_ctx = document.getElementById("memChart").getContext("2d");
        var memChart = new Chart(mem_ctx, {
            type: 'line',
            data: {
                datasets: [{
                    pointRadius: 2,
                }]
            },
            options: {
                responsive: true,
                legend: {
                    display: false
                },
                scales: {
                    xAxes:[{
                        offset: false,
                        ticks: {
                            beginAtZero: false,
                            autoSkip: true,
                            maxTicksLimit: 10,
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }],
                    yAxes: [{
                        ticks:{
                            suggestedMin: 0,
                            suggestedMax: 100,
                            callback: function(value, index, values) {
                                return value + ' MB';
                            }
                        },
                    }],
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, chart) {
                            var label = chart.datasets[tooltipItem.datasetIndex].label || '';
                            if (label) {
                                label += ': ';
                            }
                            return label += tooltipItem.yLabel  + ' MB';
                        }
                    }
                }
            }
        });
        if (Boolean({{ status }}) === true) {
            window.setInterval(function graph_usage() {
                $.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
                    cpuChart.data.labels.push(data.timeline);
                    memChart.data.labels.push(data.timeline);

                    cpuChart.data.datasets[0].data.push(data.cpudata);
                    if (cpuChart.data.datasets[0].data.length > 10){
                        cpuChart.data.labels.shift();
                        cpuChart.data.datasets[0].data.shift();
                    }
                    memChart.options.scales.yAxes[0].ticks.max = parseInt(data.memdata.total / 1048576);
                    memChart.options.scales.yAxes[0].ticks.stepSize = parseInt(data.memdata.total / (1048576 * 5));
                    memChart.data.datasets[0].data.push(parseInt(data.memdata.usage / 1048576));

                    if (memChart.data.datasets[0].data.length > 10){
                        memChart.data.labels.shift();
                        memChart.data.datasets[0].data.shift();
                    }

                    cpuChart.update();
                    memChart.update();
                });
            }, 5000);
        }
    </script>
{% endblock %}
